<template>
    <div class="container_box">
        <el-scrollbar ref="scrollbarRef" class="main_box2">
            <div class="header">
                <Step
                    ref="stepRef"
                    :current-step="currentStep"
                    :steps-label="stepsLabel"
                    :total-steps="stepsLabel.length" />
            </div>
            <div class="container">
                <!-- 活动信息 -->
                <div v-show="currentStep == 1">
                    <ActivityInfo
                        ref="ActivityInfoRef"
                        :page-type="pageType"
                        :group_id="group_id"
                        @submit="onChildValid" />
                </div>
                <div v-show="currentStep == 2">
                    <RedRules ref="RedRulesRef" :page-type="pageType" @submit="onChildValid" />
                </div>
                <div v-show="currentStep == 3">
                    <ActivitySettings ref="ActivitySettingsRef" :page-type="pageType" @submit="onChildValid" />
                </div>
                <div v-show="currentStep == 4">
                    <Welcome
                        ref="WelcomeRef"
                        :filters="['7']"
                        :max-num="8"
                        :welcome-type="true"
                        :page-type="pageType"
                        :content-tabs="[4, 1, 2, 3]"
                        @submit="onPreserve" />
                </div>
            </div>
        </el-scrollbar>
        <div class="footer_box">
            <el-button v-if="currentStep == 1" @click="onRouter()">取消</el-button>
            <el-button v-else @click="onStep">上一步</el-button>
            <el-button v-if="currentStep != 4" type="primary" @click="onNext(currentStep)">下一步</el-button>
            <el-button v-else type="primary" @click="onNext(currentStep)">
                {{ pageType == 'look' ? '返回' : '保存' }}
            </el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import ActivityInfo from './components/ActivityInfo.vue';
import RedRules from './components/RedRules.vue';
import ActivitySettings from './components/ActivitySettings.vue';
import Welcome from '@/components/welcome/ZWelcome.vue';
import { onMounted, ref, computed, nextTick } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { FormInstance, FormRules, ElMessage } from 'element-plus';
import Step from '@/components/Step.vue';
import { getSetionId } from '@/utils/utils';
import { pullCreate, pullInfo, pullEdit } from '@/api/smartMarketing/redEnvelopes';
import { useStore } from '@/store';
const store = useStore();
const router = useRouter();
const route = useRoute();
const stepRef: any = ref(null);
const pageType = ref(route.query.type);
const ActivityInfoRef: any = ref(null);
const RedRulesRef: any = ref(null);
const ActivitySettingsRef: any = ref(null);
const WelcomeRef: any = ref(null);
const group_id = ref(Number(route.query?.group_id));

const stepsLabel: any = ref([
    { title: '活动信息', stepIndex: 1 },
    { title: '红包规则', stepIndex: 2 },
    { title: '活动设置', stepIndex: 3 },
    { title: '引流设置', stepIndex: 4 }
]);
const currentStep = ref(1);
const scrollbarRef = ref<any>(null);
/**
 * @description: 滚动到顶部
 */
const setScrollTopHandle = () => {
    nextTick(() => {
        scrollbarRef.value?.setScrollTop(0);
    });
};
const onStep = () => {
    currentStep.value--;
    stepRef.value.back();
    setScrollTopHandle();
};
const onChildValid = () => {
    currentStep.value++;
    stepRef.value.next();
    setScrollTopHandle();
};
const onRouter = () => {
    store.dispatch('setGroupId', ActivityInfoRef.value.formData.group_id);
    router.back();
};
const onNext = async (curStep: number) => {
    if (pageType.value == 'look') {
        currentStep.value == 4 && onRouter();
        currentStep.value++;
        stepRef.value.next();
        setScrollTopHandle();
        return;
    }
    switch (curStep) {
        case 1:
            ActivityInfoRef.value.onSubmit();
            break;
        case 2:
            RedRulesRef.value.onSubmit();
            break;
        case 3:
            ActivitySettingsRef.value.onSubmit();
            break;
        case 4:
            if (pageType.value == 'look') {
                onRouter();
                return;
            }
            WelcomeRef.value.onSubmit();
            break;
    }
};
const onPreserve = async () => {
    delete RedRulesRef.value.formData.red_total;
    const params = {
        ...ActivityInfoRef.value.formData,
        ...RedRulesRef.value.formData,
        ...ActivitySettingsRef.value.formData,
        ...WelcomeRef.value.formData,
        welcome_flag: WelcomeRef.value.welcome_flag,
        welcome_info: WelcomeRef.value.welcome_flag == 1 ? WelcomeRef.value.formData.materialResult.welcome_info : [] // 使用欢迎语组件数据
    };
    if (pageType.value) {
        pullEdit(params).then((res: any) => {
            ElMessage.success('编辑成功');
            router.push({
                path: '/smartMarketing/drainage/redEnvelopes',
                query: { group_id: ActivityInfoRef.value.formData.group_id }
            });
        });
    } else {
        pullCreate(params).then((res: any) => {
            ElMessage.success('新建成功');
            router.push({
                path: '/smartMarketing/drainage/redEnvelopes',
                query: { group_id: ActivityInfoRef.value.formData.group_id }
            });
        });
    }
};
const getLook = async () => {
    const res = await pullInfo({ activity_id: route.query.id });
    // 活动信息
    ActivityInfoRef.value.formData = {
        official_account_id: res.official_account_id,
        activity_id: res.activity_id,
        activity_name: res.activity_name,
        group_id: res.group_id,
        period_type: res.period_type,
        activity_time: res.activity_time,
        description: res.description
    };
    // 红包规则
    RedRulesRef.value.formData.red_type = res.red_type;
    RedRulesRef.value.formData.amount = res.amount;
    RedRulesRef.value.formData.min_amount = res.min_amount;
    RedRulesRef.value.formData.max_amount = res.max_amount;
    RedRulesRef.value.formData.red_num = res.red_num;
    RedRulesRef.value.formData.area_type = res.area_type;
    RedRulesRef.value.formData.pca_code = res.pca_code || [];
    RedRulesRef.value.formData.customer_type = res.customer_type;

    // 活动设置
    ActivitySettingsRef.value.formData = {
        page_name: res.page_name,
        poster_type: res.poster_type,
        poster_id: res.poster_id,
        absolute_url: res.absolute_url,
        receive_desc: res.receive_desc
    };
    ActivitySettingsRef.value.getPosterUrl(res.poster_type, res.absolute_url);
    WelcomeRef.value.AllTags = res.tag_list;
    WelcomeRef.value.creators = res.user_list;
    WelcomeRef.value.welcome_flag = res.welcome_flag;
    Object.assign(WelcomeRef.value.formData, {
        user_list: getSetionId('id', res.user_list),
        welcome_switch: res.welcome_switch,
        welcome_type: res.welcome_type,
        time_welcome_flag: res.time_welcome_flag,
        time_welcome: [{ content: '', week: [] }],
        link_img: res.link_img,
        link_title: res.link_title,
        link_desc: res.link_desc,
        tag_list: getSetionId('id', res.tag_list)
    });
    WelcomeRef.value.onLookData(res.welcome_info);
    // WelcomeRef.value.onLookTime(res.time_welcome.map((item: any) => ({ ...item, week: item.week || [], send_time: item.send_time || [] })))
};
onMounted(() => {
    pageType.value && getLook();
});
</script>

<style lang="scss" scoped>
.header {
    padding: 21px;
    border: 1px solid #eaeaea;
    border-top: none;
    border-radius: 1px;
    box-shadow: 0 4px 4px 1px rgb(240 240 240 / 50%);
    background: #fff;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.container {
    position: relative;
    padding: 24px;
    min-height: calc(100vh - 298px);
    border-radius: 4px;
    opacity: 1;
    border: 1px solid #eaeaea;
    border-bottom: none;
    background: #fff;
    box-sizing: border-box;
    background-color: #fff;
}
</style>
